<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册百度账号</title>
    <!--  百度cdn引入jquery  -->
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 1535px;
            height: 760px;
            background-image: url(img/reg_bg_min.jpg);
            background-size: 1535px 760px;
        }
        .img1{
            width: 125px;
            height: 40px;
            margin-top: 60px;
            margin-left: 70px;
        }
        .box2{
            width: 480px;
            height: 652px;
            background-color:  rgba(255, 255, 255,0.9);
            display: inline-block;
            position: absolute;
            top: 65px;
            right: 140px;
            border-radius: 15px;

        }
        .p1{
            color: white;
            font-weight: bolder;
            font-size: 54px;
            position: absolute;
            top: 290px;
            left: 200px;
        }
        .p2{
            color:white;
            font-size: 34px;
            font-weight: 200;
            position: absolute;
            top: 360px;
            left: 200px;
            letter-spacing: 3px;
        }
        h1{
            display: inline-block;
            margin-top: 60px;
            margin-left: 40px;


        }
        .p3{

            margin-left: 40px;
        }
        .a1{
            text-decoration: none;
            color: #2E58FF;
        }
        table{

            width: 420px;
            position: absolute;
            top: 190px ;
            left: 40px;
            height: 280px;
        }
        td{
            color: #838283;
        }
        #usename,#tel,#pass{
            width: 330px;
            height: 40px;
            padding-left: 10px;
            border: none;
            border-radius: 5px;
        }
        #in1{
            width: 195px;
            height: 40px;
            padding-left: 10px;
            border: none;
            border-radius: 5px;
        }
        .in3{
            width: 400px;
            height: 50px;
            background-color: #BDCEFC;
            color: white;
            font-weight: bolder;
            text-align: center;
            line-height: 50px;
            border-radius: 25px;
            position: absolute;
            bottom: 70px;
            left: 40px;
            border: none;
        }
        .box4 .p5{
            text-align: center;
        }
        .box4{
            font-size: 12px;
            position: absolute;
            bottom: 30px;
            left: 40px;
        }
        .a2{
            text-decoration: none;
            color: #2E58FF;
        }
        #usename,#tel,#pass,#in1{
            /*  border: 1px solid #2E58FF; */
            border: none;


        }
        .d1{
            width: 315px;
            height: 30px;
            background-color:#313131 ;
            font-size: 10px;
            color: white;
            text-align: center;
            line-height: 30px;
            border-radius: 5px;
        }
        .d2{
            width: 0px;
            height: 0px;
            border: 8px solid blueviolet;
            border-top: 8px #313131 solid;
            border-bottom:8px rgba(0, 0, 0, 0) solid;
            border-left:8px rgba(0, 0, 0, 0) solid;
            border-right:8px rgba(0, 0, 0, 0) solid;
            margin-left: 20px;
        }
        .d3{
            height: 38px;
            float: left;
            position: absolute;
            left: 110px;
            top: 168px;
            display: none;
        }
        #px{
            font-size: 10px;
            color: red;
            position: absolute;
            left: 70px;
            display: none;
        }
        .font1{
            font-size: 10px;
            position: absolute;
            bottom: 186px;
            right: 50px;
            color: #2E58FF;
            cursor: default;
        }
        #sp{

        }

    </style>
</head>
<body>
<div class="box1">
    <img src="img/baidu.png" alt="" class="img1">
    <div class="box2">


        <h1>欢迎注册</h1>
        <p class="p3"><font color="#9B9B9B">已有账号？</font><a href="" class="a1">登录</a></p>
        <form action="/user/admin" method="post">
            <table cellspacing="10px" >
                <tr>
                    <td>用户名</td>
                    <td colspan="2"><input type="text" placeholder="请设置用户名" name="uesrname" id="usename" onfocus="focs()" onblur="kp(this)" > <br><span id="sp"></span></td>
                </tr>
                <tr>
                    <td>手机号</td>
                    <td colspan="2"><input type="tel" placeholder="可用于登录和找回密码" id="tel" name="phone"></td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td colspan="2"><input type="password" placeholder="请设置登录密码" id="pass" name="pass"></td>
                </tr>
                <tr>
                    <td>验证码</td>
                    <td><input type="text" placeholder="请输入验证码" id="in1" name="kcap"></td>
                    <td>
                        <img src="/captcha" style="width:110px; height:38px ;" id="cap"/><br>
                    </td>
                </tr>
            </table>
            <div class="font1" id="code">
                看不清？换一张
            </div>
            <input type="submit" class="in3" id="b" value="注册">
        </form>

        <div class="box4">
            <p><input type="checkbox">&nbsp;阅读并接受<a href="" class="a2">《百度用户协议》</a>、<a href="" class="a2">《儿童个人信息保护声明》</a>及<a href="" class="a2">《百度隐</a></p>
            <p class="p5"><a href="" class="a2">私权保护声明》</a></p>
        </div>

    </div>
    <p class="p1">用科技</p>
    <p class="p2">让复杂的世界更简单</p>

</div>
</body>
<script>



    function kp(ipt){

        //1.获取input输入框的value
        var value = ipt.value;
        //2.进行验证
        if(value != null && value !=""){
            //1-5
            //1.创建Ajax
            var xmlhttp = new XMLHttpRequest();
            //2.设置状态改变监听
            xmlhttp.onreadystatechange = function(){
                //5获取响应数据
                if(xmlhttp.readyState == 4 && xmlhttp.status ==200)
                {

                    var result = xmlhttp.responseText; //获取结果
                    /*alert(result)*/

                    //  1 行    2 不行

                    //1.找到span标签

                    var sp = document.getElementById("sp");

                    if(result == "1"){
                        //成功的 span 提示一句绿色的话
                        sp.innerHTML=""; //清空
                        var ft = document.createElement("font");
                        var fttext = document.createTextNode("恭喜您!可以注册!!"); //文本标签
                        ft.setAttribute("color", "green");
                        ft.appendChild(fttext);
                        sp.appendChild(ft);
                    }else{
                        //失败的 span 提示一句红色的话
                        sp.innerText="用户已经被注册!";
                        sp.style.color = "red";
                    }
                }
            }
            //3.设置ajax method  url
            xmlhttp.open("POST","/user/login");
            //4.发送请求
            //设置一个请求头
            xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xmlhttp.send("value="+value);

        }
    }


    $(function () {
        // 注册验证码图片的单击事件
        $("#code").click(function () {
            // 让img图片重新发送请求 给 验证码servlet
            $("#cap").attr('src','/captcha?t='+new Date().getTime());
        });

    });
</script>
</html>